<template>
	<view class="content">
		<uni-status-bar v-if="insertStatusBar"></uni-status-bar>
		<view class="main_block"></view>
		<view class="fixedblock">
			<uni-status-bar v-if="insertStatusBar"></uni-status-bar>
			<view class="main_block"></view>
			<view class="main">
				<view class="left">
					<text>深圳</text>
					<image src="../../../static/down.png" mode="widthFix"></image>
				</view>
				<view class="search">
					<uni-icons type="search" color="#C0C0C0" size="24"></uni-icons>
					<input type="text" value="" :placeholder="placeholder" />
				</view>
				<view class="right" v-if="!userinfo">
					<text @tap="go('/pages/login/login')">登录</text>
					<text @tap="go('/pages/login/register')">注册</text>
				</view>
				<view class="right" v-else>
					<text>{{ userinfo.nickname }}</text>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
import uniStatusBar from '../uni-status-bar/uni-status-bar.vue';
import uniIcons from '../uni-icons/uni-icons.vue';

export default {
	components: {
		uniStatusBar,
		uniIcons
	},
	props: {
		title: {
			type: String,
			default: ''
		},
		placeholder: {
			type: String,
			default: '请输入要搜索的关键词'
		},
		userinfo: {}
	},
	data() {
		return {
			insertStatusBar: true
		};
	},
	methods: {
		go(url) {
			uni.navigateTo({
				url: url
			});
		}
	}
};
</script>

<style lang="scss">
.content {
	background-color: #ffffff;
	.main_block {
		width: 100%;
		height: 100upx;
	}
	.fixedblock {
		width: 100%;
		position: fixed;
		top: 0;
		left: 0;
		z-index: 999;
		.main {
			background-color: #ffffff;
			box-shadow: 0 1px 6px #ccc;
			width: 100%;
			height: 100upx;
			box-sizing: border-box;
			padding: 0upx 160upx 0upx 150upx;
			position: absolute;
			bottom: 0;
			left: 0;
			display: flex;
			align-items: center;
			justify-content: center;

			.left {
				font-size: $uni-font-size-base;
				position: absolute;
				left: 0;
				top: 0;
				box-sizing: border-box;
				padding-left: 10upx;
				width: 150upx;
				height: 100%;
				display: flex;
				align-items: center;
				justify-content: flex-start;

				image {
					width: 30upx;
					margin-left: 20upx;
				}
			}

			.search {
				width: 100%;
				height: 60upx;
				box-sizing: border-box;
				padding: 0 10upx;
				background-color: #ffffff;
				border: 1upx solid #c0c0c0;
				border-radius: 10upx;
				color: $uni-text-color;
				display: flex;
				align-items: center;
				justify-content: flex-start;
				position: relative;

				input {
					width: 100%;
					padding-left: 70upx;
					height: 40upx;
					position: absolute;
					left: 0;
					top: 50%;
					transform: translateY(-50%);
					font-size: $uni-font-size-base;
				}
			}

			.right {
				width: 150upx;
				height: 100%;
				padding: 0upx 10upx;
				box-sizing: border-box;
				display: flex;
				align-items: center;
				justify-content: space-between;
				position: absolute;
				right: 0;
				top: 0;
				font-size: $uni-font-size-base;
				text-overflow: ellipsis;
				white-space: nowrap;
				lines: 1;
			}
		}
	}
}
</style>
